<!DOCTYPE html> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../styles/jquery.mobile-1.3.2.css" />
        <link rel="stylesheet" type="text/css" href="../styles/canvas.css" />
        <link rel="stylesheet" type="text/css" href="../styles/quadrante.css" />
        <title>Projeto Fulano de Tal</title>
        <style type="text/css">
            .block_postit div {padding: 1px !important;}
            .block_postit a, p {font-size: 0.9em;}
        </style>

    </head>
    <body>
        <div data-role="page" id="main" data-title="Canvas For All">
            
            <div data-role="header" data-position="fixed">
                <a href="#notifier-panel" data-inline="true" data-icon="info" data-iconpos="notext">Notifications</a>
                <h1>Canvas for All</h1>
                <a href="#menu-panel" data-inline="true" data-icon="bars" data-iconpos="notext" onClick="addEdit()">Menu</a>
            </div>

            <div data-role="content">

                <div id="draggable2"></div>

                <!-- Quadro Canvas -->
                <div id="canvas" style="display: block;">
                    
                    <div id="criarPostIt"></div>
                    <div id="coluna1">
                        <div class="quadrante1 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q1"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante1" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante1">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="quadrante2 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q2"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante2" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante2">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="quadrante3 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q3"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante3" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante3">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="coluna2">
                        <div class="quadrante4 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q4"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante4" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante4">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="quadrante5 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q5"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante5" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante5">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="coluna3">
                        <div class="quadrante6 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q6"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante6" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante6">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="quadrante7 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q7"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante7" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante7">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="coluna4">
                        <div class="quadrante8 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q8"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante8" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante8">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="quadrante9 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q9"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante9" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante9">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="coluna5">
                        <div class="quadrante10 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q10"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante10" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante10">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="quadrante11 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q11"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante11" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante11">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="quadrante12 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q12"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante12" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante12">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="coluna6">
                        <div class="quadrante13 droppable">
                            <div class="q_header">
                                <div class="q_icon icon_q13"></div>
                            </div>
                            <div class="q_nav">
                                <a href="#info_quadrante13" data-transition="flip" data-rel="popup" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" data-shadow="false" class="q_info" >Sobre</a>
                                <div data-role="popup" id="info_quadrante13">
                                    <p>I am positioned to the window.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div> 
                <!-- Fim Quadro Canvas -->

            </div>

            <!-- **************************************************************************** -->
			<!-- *								BLOCO DO POST-IT 							* -->
			<!-- **************************************************************************** -->
		
			<div data-role="popup" id="popupDialog" data-overlay-theme="a"
				data-tolerance="30px 50px 30px 50px" data-dismissible="true" style="max-width: 100%; width: 50em;"
				class="ui-corner-all">
		
				<div data-role="header">
					<h3 id="tituloPostItInPlace" 
						style="padding-left: 20px !important; 
						width: 85% !important; margin-left: 0 !important; 
						text-align: left;">Configurar IDE Eclipse</h3>
					
					<a href="#" data-rel="back" data-role="button" 
						data-theme="a" data-icon="delete" data-iconpos="notext" 
						class="ui-btn-right">Fechar</a>
				</div>
		
				<div data-role="content" style="padding: 5px !important;">
					<div style="border-bottom: 1px solid #333; padding: 0; margin: 0 3px 5px 3px;" data-mini="true">
						<div style="margin: auto 0; width: 97%; display: inline-table; padding: 5px;">
							<h5 id="descricaoPostItInPlace">Caros alunos. O projeto foi dividido em 04 grandes etapas contendo algumas boas práticas do RUP. São elas:
	- Concepção: relacionada a definição do escopo do projeto, produto e levantamento dos requisitos.
	- Elaboração: relacionada ao entendimento técnico pleno do sistema. Nela desenvolveremos os Casos de Uso, Arquitetura e Diagrama de Classes.
	- Construção: codificação dos requisitos.
	- Transição: testes e liberação de funcionalidades.

	Para identificar o status as atividades, criei legendas com cores (Planejado, Execução, Concluído e Impedimento) observem os Labels dos cartões.
							</h5>
						</div>
						
						<div style="text-align: right; margin-bottom: 5px;">
							<label style="padding: 10px !important; font-size: 0.8em;">Data: 31/12/1999</label>
						</div>
					</div>
		
					<div class="ui-grid-a">
					
						<!-- ##### INICIO BLOCO DE CHECKLIST ##### -->
						<div class="ui-block-a" style="width: 35%; padding: 5px !important;">						
							<div style="margin-top: 5px;">
								<h3 style="font-size: 0.9em; margin-bottom: 2px !important; display: inline; vertical-align: middle;">Checklist</h3>
								
								<img src="../styles/images/icon-add.png" 
									alt="Adicionar" width="18" style="vertical-align: middle; margin-left: 10px;" 
									onclick="addChecklist()">
							</div>
							
							<fieldset data-role="controlgroup" data-inset="false" style="padding: 8px;" id="fieldsetChecklist">
							    <input type="checkbox" id="checkbox-1a" data-mini="true">
								<label for="checkbox-1a">Add plugin SubClipse</label>
								
								<input type="checkbox" id="checkbox-2a" data-mini="true">
								<label for="checkbox-2a">Add plugin Eclipse XML Editors and Tools</label>  
								
<!-- 								<input type="checkbox" id="checkbox-2a" data-mini="true"> -->
<!-- 								<label for="checkbox-2a">Add plugin Eclipse XML Editors and Tools</label> -->
								
<!-- 								<input type="checkbox" id="checkbox-3a" data-mini="true"> -->
<!-- 								<label for="checkbox-3a">Configurar url para o SubVersion - Google Code</label> -->
								
<!-- 								<input type="checkbox" id="checkbox-4a" data-mini="true"> -->
<!-- 								<label for="checkbox-4a">Custom eclipse.ini</label> -->
								
<!-- 								<input type="checkbox" id="checkbox-5a" data-mini="true"> -->
<!-- 								<label for="checkbox-5a">CheckOut projetos</label> -->
								
<!-- 								<input type="checkbox" id="checkbox-6a" data-mini="true"> -->
<!-- 								<label for="checkbox-6a">Criação ADV pra testes locais</label> -->
							</fieldset>
							<!-- ##### FIM BLOCO DE CHECKLIST ##### -->
						</div>
		
						<div class="ui-block-b" style="width: 65%; padding: 5px !important;">
							
							<!-- ##### INICIO BLOCO DE COMENTÁRIO ##### -->
							<div style="margin-top: 5px;">
								<h3 style="font-size: 0.9em; margin-bottom: 2px !important; display: inline; vertical-align: middle;">Comentários</h3>
								
								<img src="../styles/images/icon-add.png" 
									alt="Adicionar" width="18" style="vertical-align: middle; margin-left: 10px;" 
									onclick="window.alert('Implementar método para adição de Comentário.');">
							</div>
							
							<fieldset data-role="controlgroup" data-inset="false" style="padding: 8px;">
							    
							    <div style="border-radius: 5px; background: #FBFBFB; float: left; padding: 2px;">
							    	<div style="width: 99%; margin: 0 auto; padding: 2px; border-bottom: 1px solid #EBEBEB; float: left;">
								    	<h6 style="font-size: 0.8em; float: left; display: block-inline; width: 60%; margin: 0 0 0 3px;">João dos Anzóis</h6>
								    	<h6 style="font-size: 0.7em; color: red; float: right; display: block-inline; margin: 0 3px 2px 0; width: 30%; text-align: right;">10/08/2013 - 13:45h</h6>
							    	</div>
							    	<p style="text-align: left; float: left;">Comentários referente a atividade do post-it.</p>
							    </div>
							</fieldset>
							<!-- ##### FIM BLOCO DE COMENTÁRIO ##### -->
						</div>
					</div>
				</div>
			</div>
			
			<!-- ##### INICIO BLOCO DO POPUP USADO PARA ADICIONAR NOVOS CHECKLISTs ##### -->
			<div data-role="popup" id="popupAddChecklist" data-overlay-theme="a"
				data-dismissible="true" class="ui-corner-all">
				
				<div data-role="header" data-theme="a" class="ui-corner-top">
        			<h1>Adicionar Checklist</h1>
    			</div>
    			
			    <div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">
			        <label class="ui-title" for="descricaoChecklist">Descrição do Checklist:</label>
			        <textarea id="descricaoChecklist" placeholder="Placeholder text..."></textarea>
			        
			        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
			        <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a>
			    </div>
			</div>
			<!-- ##### FIM BLOCO DO POPUP USADO PARA ADICIONAR NOVOS CHECKLISTs ##### -->
			
			<!-- **************************************************************************** -->
			<!-- *								FIM DO POST-IT	 							* -->
			<!-- **************************************************************************** -->

        </div>
        <script type="text/javascript" charset="utf-8" src="../scripts/util/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="../scripts/util/jquery.mobile-1.3.2.js"></script>
        <script type="text/javascript" charset="utf-8" src="../scripts/util/jquery-ui.js"></script>
        <script type="text/javascript" charset="utf-8" src="../scripts/util/jquery.ui.touch-punch.js"></script>
        <script type="text/javascript" charset="utf-8" src="../scripts/util/jquery.jeditable.js"></script>
        <script type="text/javascript" charset="utf-8" src="../scripts/util/cordova.js"></script>

        <!-- IMPORTS DE SCRIPTS DE MODEL -->
        <script type="text/javascript" charset="utf-8" src="../scripts/model/postitModel.js"></script>
        <script type="text/javascript" charset="utf-8" src="../scripts/model/canvas.js"></script>
        <script type="text/javascript" charset="utf-8" src="../scripts/dao/bd_mobile.js"></script>
        <script type="text/javascript">
        var globalPostIt = 0;
        $(function() {

            $(".edit").draggable({containment: "document", scroll: false});
            

            $("#draggable").draggable({containment: "document", scroll: false});
            $(".droppable").droppable({
                drop : function(event, ui) {
                    
                    idDraggable = ui.draggable[0].id
                    console.log(idDraggable);
                    
                    insertPostit('titulo', 'descricao', null, null);


                    

                } 

            });
        });
        

        function addEdit(event){
            
            var indice = $('.edit').length;

            var idPostIt = 'postIt'+indice;

            if($(event.target).hasClass('droppable')){
                $(event.target).append("<div id='"+idPostIt+"' class='edit'><div class='topoPostItExterno'><a href='#popupDialog' data-rel='popup' data-position-to='window' data-inline='true' data-transition='pop' >Titulo</a></div><div><h3 class='postItExterno'>Conteudo</h3></div><div><a onClick='deletar("+idPostIt+")'>X<a href='javascript:abrirCor("+idPostIt+")' data-rel='popup' data-role='button' data-inline='true' data-transition='slideup' data-icon='bars' style='float: right;'>C</a></div></div>");



                $('.postItExterno').editable(
                    function(value, settings){
                        console.log(this);
                        console.log(value);
                        console.log(settings);
                        return(value);
                    },{
                        type : 'text'
                });

                $(".edit").draggable({containment: "document"});
            }
        }

        function deletar(id){
            $(id).remove();
        }

        function alterarCor(){
            console.log(globalPostIt);
            $('.edit').addClass('cor');
        }

        function abrirCor(id){
            globalPostIt = id;
            console.log($('#popupMenu'));
            /*$('#popupMenu').dialog('open');*/
        }

        $(function(){
            $('#canvas').bind("taphold", addEdit);
        });
        
        </script>
    </body>
</html>

